<template>
  <div class="bc-chart">
    <div class="chart-head">
      <chart-head :dataType="dataType" @click="updateOptions"></chart-head>
    </div>
    <div class="chart-main" ref="charts">
      <div class="item-wrapper">
        <chart-item 
          v-for="(item, index) in currentData" 
          :key="item.id"
          :total="currentTotal"
          :subtotal="item.totalAmount"
          :showDetail="activeIndex[key] == index ? true : false"
          :name="item.name"
          :color="color"
          @click.native="updateIndex(index)"
        ></chart-item>
      </div>
    </div>
  </div>
</template>

<script>
import ChartHead from './components/chart-head'
import ChartItem from './components/chart-item'
export default {
  components: {
    ChartHead,
    ChartItem 
  },
  props: {
    dataType: {
      type: String,
      default: ''
    },
    personalInfo: {
      type: Object,
      default: function() {
        /** 收支数据 */
      }
    }
  },
  data() {
    return {
      activeIndex: {
        activeIncomeIndex: 0,
        activeOutputIndex: 0
      }
    }
  },
  methods: {
    updateOptions(data) {
      this.$emit('click', data)
    },
    updateIndex(index) {
      if (this.dataType == '收入') {
        this.activeIndex.activeIncomeIndex = index
      } else {
        this.activeIndex.activeOutputIndex = index
      }
    }
  },
  computed: {
    currentData() {
      return this.dataType == '收入' ? this.personalInfo.income : this.personalInfo.output
    },
    currentTotal() {
      return this.dataType == '收入' ? this.personalInfo.totalIncome : this.personalInfo.totalOutput
    },
    color() {
      return this.dataType == '收入' ? 'red' : 'green'
    },
    key() {
      return this.dataType == '收入' ? 'activeIncomeIndex' : 'activeOutputIndex'
    }
  },
  watch: {
    dataType(newVal) {

    }
  }
}
</script>

<style lang="stylus" scoped>
  .bc-chart 
    box-sizing border-box 
    padding 10px
    .chart-main 
      min-height 130px
      position relative 
      .item-wrapper
        position absolute 
        left 0
        right 0
        bottom 0
        display flex 
        justify-content space-between 
        height 100px
</style>